//banner图右侧图片效果
var img_01 = document.getElementById("img_01");
var img_02 = document.getElementById("img_02");
img_01.onmouseover = function() {

    animate(img_01, {
        marginLeft: -25
    });
};
img_01.onmouseout = function() {

    animate(img_01, {
        marginLeft: 0
    });
};
img_02.onmouseover = function() {
    animate(img_02, {
        marginLeft: -25
    })
};
img_02.onmouseout = function() {
    animate(img_02, {
        marginLeft: 0
    });
};


//swiper 轮播图效果
var swiper = new Swiper('.swiper-container', {
    loop: true,
    autoplay: {
        pauseOnMouseEnter: true,
    },
    spaceBetween: 50,
    effect: 'fade',

    pagination: {
        el: '.swiper-pagination',
        clickable: true,

        renderBullet: function(index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        },

    },


});
//swiper 轮播图放置鼠标停止自动播放
//配合 pauseOnMouseEnter 同时使用时生效
swiper.el.onmouseover = function() {
    swiper.autoplay.stop();
}
swiper.el.onmouseout = function() {
    swiper.autoplay.start();
}

// 新闻动态图片效果
$(function() {

    $('#indexNewsList').find('img').each(function() {

        var IMG = new Image();

        var that = $(this);

        IMG.src = $(this).attr('data-original');


        IMG.onload = function() {
            var height = IMG.height,
                width = IMG.width;
            $(that).css({
                'width': width,
                'height': height,
                'opacity': 1,
                'margin-left': -(width / 2),
                'margin-top': -(height / 2)
            });
        }
    });

});


//懒加载

$("img").lazyload();




//登录注册

window.onload = function() {
        var userid = getCookie("userid");
        var token = getCookie("token");
        if (userid && token) {
            loadUserMsg(userid, token);
        }
    }
    // 判定是否需要进行用户信息加载; 
async function loadUserMsg(id, token) {
    // 加载用户详细信息; 
    // 如果想要查询用户信息，那么我们就必须使用token秘钥; 
    // - 秘钥携带的方式就是把秘钥放在 authorization 里面， 给后端进行验证; 
    let url = "http://127.0.0.1:8888/users/info/" + id;

    let options = {
        method: "GET",
        // 把token放入到请求头之中，让后端可以验证我们的登录信息; 
        headers: {
            authorization: token
        }
    };
    let response = await fetch(url, options);

    let data = await response.json();

    renderUserMsg(data)
}

var userinfo = document.querySelector(".userinfo");
var btnlogin = document.getElementById("btnlogin");
var btnregistered = document.getElementById("btnregistered")
var gang = document.getElementById("gang")
var logout = document.getElementById("logout")

function renderUserMsg(data) {
    // console.log(data);

    userinfo.innerHTML = `${data.info.nickname}`
    btnlogin.style.display = "none"
    btnregistered.style.display = "none"
    gang.style.display = "none"
    logout.style.display = "block"


}


var logout = document.getElementById("logout");
logout.onclick = function() {

    var userid = getCookie("userid");
    var token = getCookie("token");

    if (userid && token) {
        logoutUser(userid, token)
    }
}
async function logoutUser(id, token) {

    let url = "http://127.0.0.1:8888/users/logout/" + id;

    let options = {
        method: "GET",
        // 把token放入到请求头之中，让后端可以验证我们的登录信息; 
        headers: {
            authorization: token
        }
    };
    let response = await fetch(url, options);

    let data = await response.json();

    if (data.code === 1) {

        // 成功注销之后， 我们刷新页面即可; 
        removeCookie("userid");
        removeCookie("token");

        location.reload();
    }
}


//楼 梯

$(".index-add-list-01").offset().top
    // console.log($(".index-add-list-01").offset().top);
$(window).scroll(function() {

    let scrollTop = $("html,body").scrollTop()
        // console.log(scrollTop);
    if (scrollTop > $(".index-add-list-01").offset().top) {
        $(".btn-list").css({
            display: "block"
        })
    } else {
        $(".btn-list").css({
            display: "none"
        })
    }
})

$(function() {
    // 1. 点击按钮给对应的按钮加上active类名; 
    // 2. 让页面滚动到对应的位置; 

    // 位置数组 
    // - 获取所有content元素距离文档顶部的高度; 
    let top_list = [];
    let $contents = $(".content");

    $.each($contents, function(index, ele) {
        // console.log( index , ele );
        // 获取元素的高度放入到 top_list之中; 
        top_list.push($(ele).offset().top);
    })

    $(".btn-list li").click(function() {
        // 把功能进行封装方便阅读代码; 
        // - 更改函数的this指向方便程序使用当前触发事件的dom对象; 
        changeClass.call(this)
            // - 切换页面的scrollTop ;
            // - 传入当前按钮的下标; 
        var index = $(this).index(".btn-list li");
        changeScrollTop(index);
        // console.log(index);
    })

    $(".btn-list li:last-child").click(function() {
        var index = getIndex();

        changeBtnClass(index[0]);

        $("html,body")
            .stop(true)
            .animate({
                scrollTop: top_list[0]
            })
    })

    function changeClass() {
        $(this)
            .addClass("active")
            .siblings()
            .removeClass("active")
    }

    function changeScrollTop(index) {
        // 切换页面的scrollTop;
        $("html,body")
            .stop(true)
            .animate({
                scrollTop: top_list[index]
            })
    }
    // 根据滚动的scrollTop 获取当前楼层下标; 

    var t = null;
    $(window).scroll(function() {
        clearInterval(t);
        if (t == "number") {
            return false
        }
        t = setTimeout(function() {
            var index = getIndex();
            changeBtnClass(index);
            t = null;
        }, 50)



    });

    function getIndex() {
        var scrollTop = $("html,body").scrollTop();
        // 获取下标的算法; 

        if (scrollTop >= top_list[top_list.length - 1]) {
            return top_list.length - 1;
        }

        // [0,1000,2000,3000,4000,5000]
        // 大于前一项小于后一项，就是所在下标; 
        // - 这个规则无法判断数组最后一项数据; 
        // - 我们提前判断数组的最后一项; 
        for (let i = 0; i < top_list.length; i++) {
            if (scrollTop >= top_list[i] && scrollTop < top_list[i + 1]) {
                // i就是当前下标; 
                return i;
            }
        }
    }


    function changeBtnClass(index) {
        $(".btn-list li")
            .removeClass("active")
            .eq(index)
            .addClass("active")
    }
})



//右侧固定栏效果
function goTop() {
    $(window).scrollTop(0);
}
$(function() {
    $(".online-ul .items").mouseenter(function() {
        $(this).siblings().children(".detail").hide();
        $(this).children(".detail").show();
    }).mouseleave(function() {
        $(this).children(".detail").hide();
    })

})



//商品列表 分页器 start-----------------------------



//商品列表 分页器 end------------------------------
//获取用户昵称
Getuser();
//
// 购物车
$(function() {

    initNav();

});



// 模糊搜索
var ipt = document.getElementById("txtKeyName")

ipt.oninput = function() {
    var script = document.createElement("script");
    let url = "https://suggest.taobao.com/sug?";
    url += "code=utf-8";
    url += "&q=" + ipt.value;
    url += "&area=c2c";
    url += "&bucketid=atb_search";
    url += "&callback=callback";

    script.src = url;
    document.body.appendChild(script);
    script.onload = function() {
        script.remove();
    }
}
var list = document.getElementById("list");

function callback(data) {
    console.log(data);
    // 判定一下data里面是否查询到了数据，如果查询到了数据再去渲染， 如果没有查询到数据就直接清空元素内部内容; 
    if (!data.result) {
        return list.innerHTML = ""
    }

    // 渲染页面; 
    list.innerHTML = data.result.map(index => `<div class="goods">${index[0]}</div>`).join("");
}